<template>
  <div class="main-contain">
    <div class="show-title">{{forum.title}}</div>
    <div class="form-meta">
      <el-tag size="small" type="warning" v-for="(tag,id) in forum.tags.split(';')" :key="id">{{ tag }}</el-tag>
      {{ forum.publishTime|timestampToDayHM }}
    </div>
    <div class="show-content avatar-div" v-if="forum.user!=null">
      <!-- <el-avatar size="medium" fit="fit" :src="forum.user.pic"></el-avatar> -->
      <p>{{ forum.user.realName }}</p>
    </div>
    <div class="show-content avatar-div" v-else>
      <p>{{ forum.admin.nickName }}</p>
    </div>
    <div v-html="forum.content" class="introduction"></div>
    <div class="comment-list">
      <p style="color:#d77f57;margin: 50px 0 0 0; padding: 10px 0; border-bottom: 1px solid #ddd;">评论列表</p>
      <p v-if="commentList.length==0" style="font-size: 12px;color: #999;padding: 10px 0;">--暂无评论--</p>
      <ul>
        <li class="litem" v-for="(c,id) in commentList" :key="id">
          <div class="cleft">
            <!-- <p class="avatar" v-if="c.user!=null"><el-avatar shape="square" size="large" fit="fit" :src="c.user.pic"></el-avatar></p> -->
            <p class="user" v-if="c.user!=null">{{ c.user.realName }}</p>
            <p class="user" v-else>{{ c.admin.nickName }}</p>
            <p class="ctime">{{ c.publishTime|timestampToDayHM }}</p>
          </div>
          <div class="content">{{ c.content }}</div>
        </li>
      </ul>
    </div>
    <div class="show-btn">
      <el-button size="small" class="black-button" icon="el-icon-chat-line-square" @click="handleEdit()">我要评论</el-button>
      <el-button size="small" type="info" icon="el-icon-refresh-left" @click="goBack()">返回</el-button>
    </div>
    <el-dialog
        title="发表评论"
        :visible.sync="editFormVisible"
        width="50%"
        :close-on-click-modal=false
        @click="closeDialog"
      >
        <el-form
          label-width="120px"
          :model="editForm"
          :rules="rules"
          ref="editForm"
        >
          <el-form-item label="评论内容" prop="title">
            <el-input
              type="textarea"
              size="small"
              v-model="editForm.content"
              auto-complete="off"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button
            size="small"
            type="primary"
            :loading="loading"
            class="title"
            @click="submitForm('editForm')"
            >发布评论</el-button
          >
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetForumDetail,MerSaveForumComment } from '@/api/api.js'
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      formInline: {
        forumId: '',
      },
      editForm: {
        forumId: "",
        content: '',
      },
      title: "发布帖子",
      // rules表单验证
      rules: {
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      forum: {},
      commentList: []
    }
  },
 
  created() {
    this.getdata()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getdata() {
      console.log('拉取数据！')
      const forumId = this.$route.query.fid
      console.log('获得帖子ID：',forumId)
      this.editForm.forumId=forumId
      let parameter = {forumId: forumId}
      GetForumDetail(parameter)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.forum = res.data.forum,
            this.commentList = res.data.comments
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
          if(res.code=='403'){
            this.$router.push({path:'/login'})
          }
        }).catch(err => {
          this.editFormVisible = false
          this.loading = false
          console.log(err)
          this.$message.error('查询失败，请稍后再试！')
        })
    },

    // 返回
    goBack(index, row) {
      this.$router.go(-1)
    },

    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.title = "发布评论";
      this.editForm.content = ""
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          MerSaveForumComment(this.editForm)
            .then((res) => {
              this.editFormVisible = false;
              this.loading = false;
              if (res.success) {
                this.getdata(this.formInline);
                this.$message({
                  type: "success",
                  message: "保存成功！",
                });
                this.photos=[]
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.loading = false;
              this.$message.error("评论失败！");
            });
        } else {
          return false;
        }
      });
    },

    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  }
}
</script>

<style scoped>
.margin-top{
  width: 80%;
  margin: 0 auto;
}
.userRole {
  width: 100%;
}
.comm-item{
    width: 30%;
}
.court-list .image{
    width: 100%;
}
.detail-pics{
  margin: 12px auto;
  width: 750px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.detail-pics .el-image {
  display: inline-block;
  margin-right: 1%;
  width: 23% !important;
  height: auto !important;
  margin-bottom: 5px;
}
.show-content{
  padding-bottom: 15px;
  margin: 0;
  text-align: center;
  color: #d77f57;
  font-size: 14px;
}
.show-desc{
  padding-top: 15px;
  text-align: center;
  color: #666;
  font-size: 12px;
}
.show-title{
  margin: 15px 0;
  font-size: 20px;
  color: #666;
  text-align: center;
}
.show-btn{
  text-align: center;
  margin: 30px 0;
}
.el-tag{
  margin-right: 4px;
}
.introduction{
  width: 820px;
  margin: 0 auto;
  color: #666;
}
.main-contain{
  padding-bottom: 20px;
}
.introduction img{
  width: 600px;
  height: auto;
  margin: 10px 0 10px 70px;
}
.space{
  padding: 0 10px;
}
.comment-list{
  width: 820px;
  margin: 0 auto;
  color: #666;
}
.comment-list .litem{
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  min-height: 85px;
  clear: both;
}
.comment-list .user{
  font-size: 14px;
  color: #1ea5a3;
  margin: 5px 0;
}
.comment-list .ctime{
  color: #888;
  margin: 5px 0;
  font-size: 12px;
}
.comment-list .content{
  font-size: 14px;
  float: left;
  width: 70%;
  padding-left: 15px;
}
.litem .cleft{
  float: left;
  width: 150px;
  text-align: center;
}
.avatar-div{
  display: flex; /* 设置容器为flex布局 */
  align-items: center; /* 水平居中对齐项目 */
  justify-content: center; /* 垂直居中对齐项目 */
  height: 40px; /* 设置容器高度 */
}
.avatar-div p{
  padding-left: 10px;
}
.form-meta{
  color: #888;
  font-size: 14px;
  text-align: center;
  padding-bottom: 8px;
}
.litem .avatar{
  margin: 0;
}
</style>